"use client"

import { Button } from "@/components/ui/button"
import { formatDateToMonthYear } from "@/lib/calendar"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { addMonths, subMonths } from "date-fns"

interface CalendarHeaderProps {
  currentDate: Date
  onDateChange: (date: Date) => void
}

export function CalendarHeader({ currentDate, onDateChange }: CalendarHeaderProps) {
  const handlePreviousMonth = () => {
    onDateChange(subMonths(currentDate, 1))
  }

  const handleNextMonth = () => {
    onDateChange(addMonths(currentDate, 1))
  }

  const handleToday = () => {
    onDateChange(new Date())
  }

  return (
    <div className="calendar-header">
      <h2 className="text-xl font-bold">{formatDateToMonthYear(currentDate)}</h2>
      <div className="flex items-center space-x-2">
        <Button variant="outline" size="icon" onClick={handleToday}>
          Today
        </Button>
        <Button variant="outline" size="icon" onClick={handlePreviousMonth}>
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="icon" onClick={handleNextMonth}>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    </div>
  )
}